﻿<div id="gameBorder">
    <div id="status" class="ui-widget-header">
        <div id="controlButtons">
            <button type="button" id="cmdExitFullScreen" style="display: none">Exit Full Screen</button>
            <button type="button" id="cmdSave" style="display: none">Save</button>
        </div>
        <div id="location">
        </div>
    </div>
    <div id="gamePanes">
        <div id="gamePanesRunning">
            <h3 id="inventoryLabel"><a href="#">Inventory</a></h3>
            <div id="inventoryAccordion">
                <div id="inventoryWrapper" class="elementListWrapper">
                    <ol id="lstInventory" class="elementList">
                    </ol>
                </div>
                <div class="verbButtons">
                    <button id="cmdInventory1" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory2" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory3" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory4" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory5" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory6" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory7" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory8" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                    <button id="cmdInventory9" type="button" onclick="paneButtonClick('#lstInventory',$(this));" style="display:none"></button>
                </div>
            </div>
            <h3 id="statusVarsLabel"><a href="#">Status</a></h3>
            <div id="statusVarsAccordion">
                <div id="statusVars">
                </div>
            </div>
            <h3 id="placesObjectsLabel"><a href="#">Places and Objects</a></h3>
            <div id="placesObjectsAccordion">
                <div id="placesObjectsWrapper" class="elementListWrapper">
                    <ol id="lstPlacesObjects" class="elementList">
                    </ol>
                </div>
                <div id="placesObjectsButtons" class="verbButtons">
                    <button id="cmdPlacesObjects1" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects2" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects3" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects4" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects5" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects6" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects7" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects8" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                    <button id="cmdPlacesObjects9" type="button" onclick="paneButtonClick('#lstPlacesObjects',$(this));" style="display:none"></button>
                </div>
            </div>
            <h3 id="compassLabel"><a href="#">Compass</a></h3>
            <div id="compassAccordion">
                <table id="compassTable">
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <button id="cmdCompassNW" class="compassbutton" type="button" title="go northwest"
                                            onclick="compassClick(_compassDirs[0]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassN" class="compassbutton" type="button" title="go north"
                                            onclick="compassClick(_compassDirs[1]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassNE" class="compassbutton" type="button" title="go northeast"
                                            onclick="compassClick(_compassDirs[2]);"></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button id="cmdCompassW" class="compassbutton" type="button" title="go west"
                                            onclick="compassClick(_compassDirs[3]);"></button>
                                    </td>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <button id="cmdCompassE" class="compassbutton" type="button" title="go east"
                                            onclick="compassClick(_compassDirs[4]);"></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button id="cmdCompassSW" class="compassbutton" type="button" title="go southwest"
                                            onclick="compassClick(_compassDirs[5]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassS" class="compassbutton" type="button" title="go south"
                                            onclick="compassClick(_compassDirs[6]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassSE" class="compassbutton" type="button" title="go southeast"
                                            onclick="compassClick(_compassDirs[7]);"></button>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <button id="cmdCompassU" class="compassbutton" type="button" title="go up"
                                            onclick="compassClick(_compassDirs[8]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassIn" class="compassbutton" type="button" title="go in"
                                            onclick="compassClick(_compassDirs[10]);">in</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <button id="cmdCompassD" class="compassbutton" type="button" title="go down"
                                            onclick="compassClick(_compassDirs[9]);"></button>
                                    </td>
                                    <td>
                                        <button id="cmdCompassOut" class="compassbutton" type="button" title="go out"
                                            onclick="compassClick(_compassDirs[11]);">out</button>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="gamePanesFinished">
            <h2>Game Over</h2>
            <p>This game has finished.</p>
        </div>
    </div>
    <div id="gamePanel"></div>
    <div id="gridPanel">
        <canvas id="gridCanvas" width="700" height="300" keepalive="true">
            <p><b>The graphical map cannot be displayed</b></p>
            <p>Your web browser does not support the graphical map. To see the map, please upgrade to Chrome, Safari, Firefox or Internet Explorer 9.</p>
        </canvas>
    </div>
    <div id="gameContent">
        <div id="gamePanelSpacer"></div>
        <div id="divOutput">
            <div id="outputData" style="display: none" data-divcount="0"></div>
            <h1 id="gameTitle">
                Loading...</h1>
        </div>
        <div id="txtCommandSpacer"></div>
        <div id="txtCommandDiv">
            <input type="text" x-webkit-speech id="txtCommand" onkeydown="return commandKey(event);" placeholder="Type here..."
                autofocus />
            <a id="endWaitLink" onclick="endWait();" class="cmdlink" style="display: none">Continue...</a>
        </div>
    </div>
</div>
<div id="dialog" title="Menu">
    <p id="dialogCaption">
    </p>
    <select id="dialogOptions" size="3">
    </select>
</div>
<div id="msgbox" title="Question">
    <p id="msgboxCaption">
    </p>
</div>